import React, { useState } from 'react'
import { NavLink } from 'react-router-dom'

import './bottom.scss'

const BottomNav = (props) => {
   
  const [data, setData] = useState([
    {
      id: 1,
      name: '音乐',
      icon: 'icon-yinle',
      path: '/home'
    },
    {
      id: 2,
      name: '视频',
      icon: 'icon-yinle1',
      path: '/video'
    },
    {
      id: 3,
      name: '扑通',
      icon: 'icon-yun',
      path: '/play'
    },
    {
      id: 4,
      name: '我的',
      icon: 'icon-wode',
      path: '/main'
    },
  ])
  return (
    <footer className='foot-btn'>
      <ul className='btn'>
        {
          data.map((item, index) => {
            return (
              <li className='btn-item' key={ index + item.name }>
                <NavLink
                  style={{
                    color: '#AAAAAA',
                    fontColor: '#AAAAAA'
                  }}
                  activeStyle={{
                    color: '#33FF33',
                    fontColor: '#33FF33'
                  }}
                  to={ item.path }
                >
                  <i className={ 'iconfont ' + item.icon } />
                  <p>{ item.name }</p>
                </NavLink>
              </li>
            )
          })
        }
      </ul>
    </footer>
  )
}

export default BottomNav